/*
 * @Description:
 * @Author: dh
 * @Date: 2022-01-24 14:46:59
 * @LastEditors: dh
 * @LastEditTime: 2022-04-13 14:00:06
 */

$.ajax({
	url: 'https://easy-mock.com/mock/5c0b4a876162b83fe0a50cb9/person',
	type: 'GET',
	success: function (data) {},
	error: function (e) {},
	// 请求完成后的处理函数(无论成功失败都会被触发)
	complete: function () {},
	// 改变函数上下文(this指向)
	context: $('.demo'),
})

// $.ajax() 返回的是一个延迟对象、
// 因此可以直接简写成 $.ajax().then( fn_1 , fn_2 )
// 这样请求成功时触发参数1(fn_1)，当失败时触发参数2(fn_2)；
// then方法为回调的延迟对象，它等同于ajax对象内的success跟error属性。
// 这样的写法可以优化代码，提升代码的阅读性，更加规范，方便后期维护、防止回调地狱、

console.loe('==============原生 Ajax请求====================')
function Ajax(url, type, data, callback) {
	var xhr = null
	// 兼容IE浏览器、
	if (window.XMLHttpRequest) {
		// 主流浏览器方法、Google Opera
		xhr = new XMLHttpRequest()
	} else {
		// IE方法
		xhr = new ActiveXObject('Microsoft.XMLHttp')
	}
	// 给xhr绑定状态事件、onreadystatechange
	xhr.onreadystatechange = function () {
		// 请求过程中的进度 1 2 3 4  (4为完成)
		console.log(xhr.readyState)
		if (xhr.readyState == 4) {
			// 返回的状态吗 200 302 404 503
			if (xhr.status == 200) {
				console.log(xhr.responseText)
				typeof callback === 'function' && callback(xhr.responseText)
			}
		}
	}

	// 判断请求类型
	if (type == 'POST') {
		// 当post类型时需要在 .send 中传递数据、
		xhr.send(data)
		// 设置请求协议头、(默认类型)
		xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')
		// 1.请求类型  2.url  true 是否异步加载、
		xhr.open(type, url, true)
	} else {
		// 1.请求类型  2.url  true 是否异步加载、
		xhr.open(type, url + '?' + data, true)
	}
}
